<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>异步加载图片体验JS任务</title>
</head>
<body>
    
</body>
<script>
    function laodImage(url,succeed,error){
        let img = new Image()   //定义一个Image类
        img.src = url   //设置img的src路径
        img.onload = succeed(img)    // 绑定当加载成功时的任务
        img.onerror = error   //当加载失败的任务
    }
    laodImage('./img/02.jpg',(img)=>{   
        document.querySelector('body').appendChild(img)   //appendChild() 添加子节点
    },()=>{
        console.log('加载失败')
    })
    console.log('Jimmy.com')
    /*
        结果是先显示Jimmy.com 后显示加载成功或者加载失败
            其实JS的任务工作原理是从上到下执行的， 但是任务（回调函数会被安排到一个特定的任务轮询里面）
                当浏览器从上到下解析完成了JS代码后 就会回头会遍历每一个任务轮询
        
            所以Jimmy.com肯定是在加载成功，或者加载失败的后面  这个也就是JS所谓的异步处理  正式因为有了这个异步， 才使得浏览器不会因为加载一张比较大的图片的时候造成整个页面的卡顿
    */
</script>
</html>